﻿(function () {
    "use strict";

    WinJS.UI.Pages.define("/html/homePage.html", {
        timer: null,
        bar: null,
        appBar: null,
        tempo: null,
        bindingSource: null,
        sound: null,
        isLeft: false,
        ready: function (element, options) {
            this.bar = element.querySelector('#bar');
            this.appBar = element.querySelector('#appbar').winControl;
            this.tempo = 0;
            // Initialize Application
            this.initialize(element);
        },
        initialize: function (element) {
            // Metronome Weight settings
            var weight = element.querySelector("#weight");
            weight.addEventListener("MSPointerMove", this.changeTempo.bind(this), false);
            // Metronome Tempo Bindings
            var t = {
                bpm : this.tempos[this.tempo].bpm,
                mark : this.tempos[this.tempo].mark
            };
            WinJS.Binding.processAll(element.querySelector('.sub'), t);
            this.bindingSource = WinJS.Binding.as(t);
            // Metronome Sounds settings
            this.sound = element.querySelector('audio');
            // AppBar settings
            element.querySelector("#start").addEventListener("click", this.start.bind(this), false);
            element.querySelector("#stop").addEventListener("click", this.stop.bind(this), false);
            this.appBar.hideCommands(['stop'], true);
        },
        flip: function (e) {
            this.isLeft = !this.isLeft;
            e.style.msTransform = this.isLeft ? 'rotate(-30deg)' : 'rotate(30deg)';
            this.sound.play();
        },
        getBps: function () {
            return Math.floor(60 / this.tempos[this.tempo].bpm * 100) / 100;
        },
        bindTempoData: function (index) {
            this.bindingSource.bpm = this.tempos[index].bpm;
            this.bindingSource.mark = this.tempos[index].mark;
        },
        changeTempo: function (e) {
            var maxIndex = this.tempos.length;
            var bar = document.querySelector("#bar");
            var index = Math.floor((e.pageY - bar.offsetTop) * maxIndex / bar.offsetHeight);
            if (0 <= index && index < this.tempos.length) {
                this.tempo = index;
                document.querySelector("#weight").style.top = Math.floor(bar.offsetHeight / maxIndex * index - 50) + "px";
                this.sound.play();
                this.bindTempoData(index);
            }
        },
        start: function () {
            var that = this;
            this.bar.style.msTransition = '-ms-transform ' + this.getBps() + 's ease-in-out';
            this.timer = window.setInterval(function () { that.flip(that.bar); }, this.getBps() * 1000);

            this.appBar.hide();
            this.appBar.hideCommands(['start'], true);
            this.appBar.showCommands(['stop'], true);
        },
        stop: function () {
            window.clearInterval(this.timer);
            this.bar.style.msTransform = 'rotate(0deg)';

            this.appBar.hide();
            this.appBar.hideCommands(['stop'], true);
            this.appBar.showCommands(['start'], true);
        },
        tempos: [
            { bpm: 40, mark: 'Lento' },         // 0
            { bpm: 44, mark: 'Lento' },         // 1
            { bpm: 48, mark: 'Lento' },         // 2
            { bpm: 52, mark: 'Lento' },         // 3
            { bpm: 56, mark: 'Lento' },         // 4
            { bpm: 60, mark: 'Adagio' },        // 5
            { bpm: 66, mark: 'Adagio' },        // 6
            { bpm: 72, mark: 'Adagio' },        // 7
            { bpm: 80, mark: 'Andante' },       // 8
            { bpm: 88, mark: 'Andante' },       // 9
            { bpm: 96, mark: 'Andante' },       // 10
            { bpm: 104, mark: 'Moderato' },     // 11
            { bpm: 112, mark: 'Moderato' },     // 12
            { bpm: 120, mark: 'Moderato' },     // 13
            { bpm: 132, mark: 'Allegro' },      // 14
            { bpm: 144, mark: 'Allegro' },      // 15
            { bpm: 152, mark: 'Allegro' },      // 16
            { bpm: 160, mark: 'Allegro' },      // 17
            { bpm: 168, mark: 'Presto' },       // 18
            { bpm: 176, mark: 'Presto' },       // 19
            { bpm: 184, mark: 'Presto' },       // 20
            { bpm: 192, mark: 'Presto' },       // 21
            { bpm: 200, mark: 'Presto' },       // 22
            { bpm: 208, mark: 'Prestissimo' },  // 23
        ]
    });
})();